<template>
	<view>
		<view class="header" v-bind:class="{'status':isH5Plus}">
			<view class="userinfo">
				<view class="face">
					<image :src="(userInfo.avatarImg==null||userInfo.avatarImg=='')?'../../../static/user.png':serverUrl+userInfo.avatarImg"></image>
				</view>
				<view class="info">
					<view class="username">
						<block v-if="!hasLogin">
							<label @click="goLogin()">登录</label> / <label @click="goRegister()">注册</label>
						</block>
						<block v-else="">
							<label>{{userInfo.certification==1?userInfo.realName:(userInfo.nickName==null||userInfo.nickName==""?userInfo.username:userInfo.nickName)}}</label>
							<block v-if="userInfo.certification==1">
								<image src="../../../static/v.png" style="width: 35upx; height: 35upx; margin-left: 5upx;" />
							</block>
						</block>
					</view>
					<view class="integral">{{(userInfo.signature==null||userInfo.signature=="")?"知识源于积累，源于分享":userInfo.signature}}</view>
				</view>
			</view>
			<view class="setting" @click="goSetting()">
				<image src="../../../static/setting.png"></image>
			</view>
		</view>

		<view class="orders">
			<view class="box">
				<view class="label" v-for="(row,index) in orderTypeLise" :key="row.name" hover-class="hover" hover-stay-time="50"
				 @tap="toOrderType(row.url)">
					<view class="icon">
						<view class="badge" v-if="row.badge>0">{{row.badge}}</view>
						<image :src="'../../../static/'+row.icon"></image>
					</view>
					{{row.name}}
				</view>
			</view>
		</view>

		<view class="grace-left-padding-wrap" style="margin-top:-60upx;">
			
			<block v-if="userInfo.certification==1">
				<navigator :url="'/pages/my/home-page/home-page?id='+userInfo.id">
					<button class="save-btn" >我的学者主页</button>
				</navigator>
			</block>
			<block v-else="">
				<navigator :url="hasLogin==true?'../../my/claim-step1/claim-step1':'/pages/general/login/login'">
					<button class="save-btn" >我要认证学者</button>
				</navigator>
			</block>
			
			<label class="grace-list" @click="goBrower()">
				<image src="../../../static/liulan.png" class="grace-list-imgs-l" mode="widthFix"></image>
				<text class="grace-list-text">我的浏览</text>
				<view>
					<text class="grace-list-text grace-list-mr">{{countObj.browserCount}}</text>
					<text class="grace-list-imgs-arrow grace-iconfont icon-arrow-right"></text>
				</view>
			</label>
			<label class="grace-list" @click="goMessage()">
				<image src="../../../static/xiaoxi.png" class="grace-list-imgs-l" mode="widthFix"></image>
				<text class="grace-list-text">我的消息</text>
				<view>
					<text class="grace-list-text grace-list-mr">{{countObj.messageCount}}</text>
					<text class="grace-list-imgs-arrow grace-iconfont icon-arrow-right"></text>
				</view>
			</label>

			<label class="grace-list" @click="goUpdate()">
				<image src="../../../static/jianchagengxin.png" class="grace-list-imgs-l" mode="widthFix"></image>
				<text class="grace-list-text">检查更新</text>
				<view>
					<text class="grace-list-imgs-arrow grace-iconfont icon-arrow-right"></text>
				</view>
			</label>
			<label class="grace-list" @click="goFeedback()">
				<image src="../../../static/yijian.png" class="grace-list-imgs-l" mode="widthFix"></image>
				<text class="grace-list-text">意见反馈</text>
				<text class="grace-list-imgs-arrow grace-iconfont icon-arrow-right"></text>
			</label>
			<label class="grace-list">
				<image src="../../../static/guanyuwomen.png" class="grace-list-imgs-l" mode="widthFix"></image>
				<text class="grace-list-text">关于我们</text>
				<view>
					<text class="grace-list-imgs-arrow grace-iconfont icon-arrow-right"></text>
				</view>
			</label>
			<label class="grace-list">
				<image src="../../../static/bangzhu.png" class="grace-list-imgs-l" mode="widthFix"></image>
				<text class="grace-list-text">使用帮助</text>
				<text class="grace-list-imgs-arrow grace-iconfont icon-arrow-right"></text>
			</label>
		</view>

	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: {
			...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid'])
		},
		data() {
			return {
				//#ifdef APP-PLUS
				isH5Plus: true,
				//#endif
				serverUrl: this.serverUrl,
				countObj: {
					browserCount: 0,
					messageCount: 0,
				},
				orderTypeLise: [
					//name-标题 icon-图标 badge-角标
					{
						name: '订单',
						icon: 'jiaoyi_c.png',
						badge: 0,
						url: '/pages/my/order/order'
					},
					{
						name: '圈子',
						icon: 'quanzi_c.png',
						badge: 0,
						url: '/pages/my/social/social'
					},
					{
						name: '收藏',
						icon: 'shoucang_c.png',
						badge: 0,
						url: '/pages/my/collect/collect'
					},
					{
						name: '订阅',
						icon: 'dingyue_c.png',
						badge: 0,
						url: ''
					}
					// 					{
					// 						name: '消息',
					// 						icon: 'l5.png',
					// 						badge: 0
					// 					}
				]

			};
		},
		onLoad() {

		},
		onShow() {
			if (this.hasLogin) {
				this.getPayOrderCount();
				this.getSocialMainCountByUsername();
				this.getMyCollectCount();
				this.getMyBrowserCount();
				this.getMyMessageCount();
			}else {
				this.countObj.browserCount=0;
				this.countObj.messageCount=0;
				for(var i=0;i<this.orderTypeLise.length;i++){
					this.orderTypeLise[i].badge=0;				
				}
			}
		},
		methods: {
			...mapMutations(['login', 'logout', 'setOpenid', 'setProvider']),
			getPayOrderCount() {
				uni.request({
					url: this.serverUrl + 'user-api/getPayOrderCount',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					data: {
						username: this.userInfo.username,
					},
					method: "POST",
					success: (r) => {
						if (r.data.code == '000000') {
							this.orderTypeLise[0].badge = r.data.data;
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},
			getSocialMainCountByUsername() {
				uni.request({
					url: this.serverUrl + 'user-api/getSocialMainCountByUsername',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					data: {
						username: this.userInfo.username,
					},
					method: "POST",
					success: (r) => {
						if (r.data.code == '000000') {
							this.orderTypeLise[1].badge = r.data.data;
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},
			getMyCollectCount() {
				uni.request({
					url: this.serverUrl + 'user-api/getMyCollectCount',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					data: {
						username: this.userInfo.username,
					},
					method: "POST",
					success: (r) => {
						if (r.data.code == '000000') {
							this.orderTypeLise[2].badge = r.data.data;
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},
			getMyBrowserCount() {
				uni.request({
					url: this.serverUrl + 'user-api/getMyBrowserCount',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					data: {
						username: this.userInfo.username,
					},
					method: "POST",
					success: (r) => {
						//console.log(r);
						if (r.data.code == '000000') {
							this.countObj.browserCount = r.data.data;
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},
			getMyMessageCount() {
				uni.request({
					url: this.serverUrl + 'user-api/getMyMessageCount',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					data: {
						username: this.userInfo.username,
					},
					method: "POST",
					success: (r) => {
						//console.log(r);
						if (r.data.code == '000000') {
							this.countObj.messageCount = r.data.data;
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},
			//用户点击订单类型
			toOrderType(url) {
				if (this.hasLogin) {
					uni.navigateTo({
						url: url
					})
				} else {
					uni.navigateTo({
						url: "/pages/general/login/login?url="+url
					})
				}
			},
			//用户点击列表项
			toPage(list_i, li_i) {
				uni.showToast({
					title: this.severList[list_i][li_i].name
				});
			},
			goLogin() {
				uni.navigateTo({
					url: "/pages/general/login/login"
				})
			},
			goRegister() {
				uni.navigateTo({
					url: "/pages/general/register/register"
				})
			},
			goBrower() {
				if (this.hasLogin) {
					uni.navigateTo({
						url: "/pages/my/brower/brower"
					})
				} else {
					uni.navigateTo({
						url: "/pages/general/login/login?url=/pages/my/brower/brower"
					})
				}
			},
			goMessage() {
				if (this.hasLogin) {
					uni.navigateTo({
						url: "/pages/my/message/message"
					})
				} else {
					uni.navigateTo({
						url: "/pages/general/login/login?url=/pages/my/message/message"
					})
				}
			},
			goFeedback() {
				uni.navigateTo({
					url: "/pages/general/feedback/feedback"
				})
			},
			goSetting() {
				if (this.hasLogin) {
					uni.navigateTo({
						url: "/pages/my/setting/setting"
					})
				} else {
					uni.navigateTo({
						url: "/pages/general/login/login?url=/pages/my/setting/setting"
					})
				}
			},
			goUpdate() {
				//#ifdef MP-WEIXIN
				const updateManager = uni.getUpdateManager();
				updateManager.onCheckForUpdate(function(res) {
					// 请求完新版本信息的回调
					console.log(res.hasUpdate);
					if (!res.hasUpdate) {
						uni.showToast({
							title: '当前已是最新版本',
							icon: 'none'
						})
					}
				});
				updateManager.onUpdateReady(function(res) {
					uni.showModal({
						title: '更新提示',
						content: '新版本已经准备好，是否重启应用？',
						success(res) {
							if (res.confirm) {
								// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
								updateManager.applyUpdate();
							}
						}
					});

				});
				updateManager.onUpdateFailed(function(res) {
					// 新的版本下载失败
				});
				//#endif
				//#ifdef APP-PLUS
				var server = "https://www.example.com/update"; //检查更新地址
				var req = { //升级检测数据
					"appid": plus.runtime.appid,
					"version": plus.runtime.version
				};
				uni.request({
					url: server,
					data: req,
					success: (res) => {
						if (res.statusCode == 200 && res.data.status === 1) {
							uni.showModal({ //提醒用户更新
								title: "更新提示",
								content: res.data.note,
								success: (res) => {
									if (res.confirm) {
										plus.runtime.openURL(res.data.url);
									}
								}
							})
						}
					}
				})
				//#endif
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff
	}

	.header {
		&.status {
			padding-top: var(--status-bar-height);
		}

		background-color:#417dc9;
		width:92%;
		height:30vw;
		// height:47vw; //
		padding:0 4%;
		display:flex;
		align-items:center;

		.userinfo {
			width: 90%;
			display: flex;

			.face {
				flex-shrink: 0;
				width: 15vw;
				height: 15vw;

				image {
					width: 100%;
					height: 100%;
					border-radius: 15upx;
				}
			}

			.info {
				display: flex;
				flex-flow: wrap;
				padding-left: 15px;

				.username {
					width: 100%;
					color: #fff;
					font-size: 18px
				}

				.integral {
					display: flex;
					align-items: center;
					margin-left: -10upx;
					padding: 0 5px;
					height: 20px;
					color: #fff;
					background-color: rgba(0, 0, 0, 0.1);
					border-radius: 10px;
					font-size: 12px
				}
			}
		}

		.setting {
			flex-shrink: 0;
			width: 6vw;
			height: 6vw;

			image {
				width: 100%;
				height: 100%
			}
		}
	}

	.hover {
		background-color: #eee
	}

	.orders {
		background-color: #417dc9;
		width: 92%;
		height: 11vw;
		padding: 0 4%;
		margin-bottom: calc(11vw + 20px);
		display: flex;
		align-items: flex-start;
		border-radius: 0 0 100% 100%;

		.box {
			width: 98%;
			padding: 0 1%;
			height: 18.5vw;
			background-color: #fefefe;
			border-radius: 12px;
			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			justify-content: center;

			.label {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-flow: wrap;
				width: 100%;
				height: 16vw;
				color: #666666;
				font-size: 13px;

				.icon {
					position: relative;
					width: 7vw;
					height: 7vw;
					margin: 0 1vw;

					.badge {
						position: absolute;
						width: 4vw;
						height: 4vw;
						background-color: #ec6d2c;
						top: -1vw;
						right: -1vw;
						border-radius: 100%;
						font-size: 10px;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center
					}

					image {
						width: 7vw;
						height: 7vw
					}
				}
			}
		}
	}

	.save-btn {
		margin-left:7px;
		width: 92%;
		height: 80upx;
		line-height: 80upx;
		background: rgba(0, 170, 255, 1);
		border-radius: 10upx;
		color: #FFFFFF;
		font-size: 14px;
	}	
</style>
